<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>标准地图</title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#container {
				height: 100%
			}
		</style>
	</head>
	<body>
		<div id='container'></div>
	</body>
	<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

	<!-- 百度地图 -->
	<!-- BMapGL 1.0 -->
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Af6FfpOOZrHT1Ff2enuUKMZgjz4NfQ3W"></script>
	
	<!-- 示例文档 -->
	<!-- https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show -->
	
	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			// 配置百度地图
			var map = new BMapGL.Map("container");   // 创建地图实例
			var point = new BMapGL.Point(108.970588,34.224352);   // 创建点坐标
			// 设置地图类型(1.标准地图：BMAP_NORMAL_MAP 2.地球模式：BMAP_EARTH_MAP 3.普通卫星地图：BMAP_SATELLITE_MAP)
			// map.setMapType(BMAP_EARTH_MAP);
			var opts = { offset: new BMapGL.Size(10, 40) }
			var scaleCtrl = new BMapGL.ScaleControl(opts);  // 添加比例尺控件
			map.addControl(scaleCtrl);
			var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
			map.addControl(zoomCtrl);
			map.centerAndZoom(point, 18);   // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true);   // 开启鼠标滚轮缩放
			map.setHeading(0);   // 设置地图旋转角度
			map.setTilt(50);   // 设置地图的倾斜角度
		});
	</script>
</html>
